<template>
    <div class="app-container">
        <el-form ref="searchForm" inline :model="searchForm" style="position:relative;">
            <el-row>
                <el-col :span="20">
                    <el-form-item label="服务名称：" prop="serviceName">
                        <el-select clearable v-model="searchForm.serviceName" placeholder="请选择">
                            <el-option v-for="item in serviceOpt" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="回复状态：" prop="replyStatus">
                        <el-select clearable v-model="searchForm.replyStatus" placeholder="请选择">
                            <el-option v-for="item in replyStatusOpt" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button @click="init('search')" type="primary">查询</el-button>
                </el-col>
                <el-col :span="4">
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData" border style="width: 100%;margin-bottom: 20px;">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="serviceName" label="服务名称" align="center"></el-table-column>
            <el-table-column prop="reservationType" :formatter="reservationTypeFun" label="预约类型" align="center"></el-table-column>
            <el-table-column prop="reservationTime" label="预约时间" align="center"></el-table-column>
            <el-table-column prop="userAddressPhone" label="联系电话" align="center"></el-table-column>
            <el-table-column prop="mergerName" label="所在区域" align="center"></el-table-column>
            <el-table-column prop="nickName" label="用户" align="center"></el-table-column>
            <el-table-column prop="userEvaluation" label="用户评价" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="userScore" label="用户评分" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" width="160"></el-table-column>
            <el-table-column label="操作" width="160" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button @click.stop="supportClick(scope.row)" type="primary" plain size="mini" :disabled="scope.row.replyStatus == 2">回复</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="getList" layout="total, prev, pager, next, jumper" :total="pageData.totalElements"></el-pagination>
        <!-- 弹框 -->
        <el-dialog :visible.sync="showDialog" width="800px">
            <el-form ref="dataForm" :rules="rules" :model="dataForm" label-position="left" label-width="120px" style="margin: 0px 50px;">
                <el-form-item label="回复：" prop="supporter_reply">
                    <el-input v-model="dataForm.supporter_reply" type="textarea" :rows="4" placeholder="必填项。请输入预约评价回复内容"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="addSubmit('dataForm')" type="primary">保存</el-button>
                    <el-button @click="cancelClick('dataForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { findPageEvaluation, SupportReservationEvaluation } from '@/api/reservations/reservation-evaluation'
import { findService } from '@/api/service/customize-service-level'
export default {
    name: 'reservationEvaluation',
    data() {
        return{
            tableData: [],
            nowTit: '',
            nowId: '',
            showDialog: false,
            dataForm: {
                id: '',
                supporter_reply: ''
            },
            rules: {
                supporter_reply: [
                    { required: true, message: '请输入预约评价回复内容', trigger: 'blur' }
                ],
            },
            searchForm: {
                serviceName: '',
                replyStatus: ''
            },
            nowPage: 0,
            pageSize: 10,
            imageUrl: '',
            formData: {},
            popStatus: 0,  //0为添加，1为修改
            pageData: {},
            serviceOpt: [],
            replyStatusOpt: [
                { id: 1, name: '未回复'},
                { id: 2, name: '已回复'}
            ],
        }
    },
    methods: {
        //默认函数
        init(params){
            const _this = this;
            if(params == 'search'){
                _this.nowPage = 0
            }
            //获取列表信息
            findPageEvaluation(this.nowPage, this.pageSize, this.searchForm.serviceName, this.searchForm.replyStatus).then(response => {
                if(response.code == 200){
                    _this.pageData = response.object;
                    _this.tableData = response.object.content;
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        serviceList(){
            const _this = this;
            //获取列表信息
            findService(0, 10000,'').then(response => {
                if(response.code == 200){
                    _this.serviceOpt = response.object.content;
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //添加
        addClick(){
            this.popStatus = 0;
            this.showDialog = true;
            this.dataForm.description = '';
            if(this.dataForm.id){
                delete this.dataForm.id;
            }
        },
        //提交添加
        addSubmit(formName){
            let _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //提交
                    SupportReservationEvaluation({id: _this.dataForm.id, supporter_reply: _this.dataForm.supporter_reply}).then(response => {
                        if(response.code == 200){
                            this.$message.success(response.message);
                            _this.init()
                            _this.showDialog = false;
                        }else{
                            this.$message.error(response.message);
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //回复
        supportClick(row){
            this.popStatus = 1;
            this.nowId = row.id;
            this.dataForm.id = row.id;
            this.dataForm.supporter_reply = '';
            this.showDialog = true;
        },
        //取消
        cancelClick(formName){
            this.showDialog = false;
            this.$refs[formName].resetFields();
        },
        //分页
        getList(val) {
            this.nowPage = val - 1;
            this.init();
        },
        reservationTypeFun(row){
            if(row.reservationType == 1){
                return '系统代约'
            }else if(row.reservationType == 2){
                return '用户网约'
            }
        },
    },
    mounted(){
        this.init()
        this.serviceList()
    }
}
</script>